<template>
  <view v-if="!isLoading" class="container b-f p-b">
	<view class="base">
		<view class="coupon-image">
			<image class="image" :src="detail.image"></image>
		</view>
		<view class="coupon-title">
		  <view class="name">{{ detail.name }}</view>
		  <view v-if="detail.amount > 0" class="price"><span class="label">面额：</span>￥{{ detail.amount }}</view>
		  <view v-if="detail.type == 'P'" class="balance"><span class="label">余额：</span>￥{{ detail.balance }}</view>
		  <view v-if="detail.tips" class="tips">{{ detail.tips }}</view>
		  <view class="time">有效期：{{ detail.effectiveDate }}</view>
		</view>
		<view v-if="detail.status=='B'" class="icon-can"></view>
		<view v-else-if="detail.status=='C'" class="icon-cannot"></view>
	</view>
	<view class="confirm-form">
		<u-form :model="form" label-width="140rpx">
		  <u-form-item class="input" v-if="detail.type === 'P'" label="金额:">
		    <u-input v-model="form.amount" placeholder="核销金额" />
		  </u-form-item>
		  <view v-if="detail.type === 'T'" class="coupon-timer">
		    <view class="tips">完成情况({{detail.confirmCount}}/{{detail.useRule}})</view>
			<uni-row class="time-row" v-for="row in dataList">
				<uni-col :span="rowCount" v-for="item in row.data" class="time-item">
					<view v-if="item.isActive == true" class="time active"></view>
					<view v-else class="time"></view>
				</uni-col>
			</uni-row>
		  </view>
		  <u-form-item class="input" label="备注:" :border-bottom="false">
		    <u-input v-model="form.remark" placeholder="核销备注" />
		  </u-form-item>
		</u-form>
	</view>
    <view class="coupon-content m-top20">
		<view class="title">使用须知</view>
        <view class="content"><jyf-parser :html="detail.description"></jyf-parser></view>
    </view>
    <view class="footer-fixed">
	  <view v-if="detail.status == 'A'" class="btn-wrapper">
		<view class="btn-item btn-item-main" @click="doConfirm()">确定核销</view>
	  </view>
	  <view v-else-if="detail.status == 'B'" class="btn-wrapper">
	    <view class="btn-item cannot">已经核销</view>
	  </view>
	  <view v-else class="btn-wrapper">
	    <view class="btn-item cannot">不可核销</view>
	  </view>
    </view>
	<!-- 快捷导航 -->
	<shortcut/>
  </view>
</template>

<script>
  import * as myCouponApi from '@/api/myCoupon'
  import * as confirmApi from '@/api/confirm'
  import Shortcut from '@/components/merchant-shortcut'
  
  export default {
	components: {
		Shortcut
	},
    data() {
      return {
        // 当前会员卡券ID
        userCouponId: null,
        // 加载中
        isLoading: true,
        // 当前卡券详情
        detail: null,
		rowCount: 0,
		dataList: [],
		// 核销结果
		result: false,
		form: {'code': '', 'amount': '', 'remark': ''}
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 记录ID
      this.userCouponId = options.id
      // 获取卡券详情
      this.getCouponDetail()
    },

    methods: {
      // 获取卡券详情
      getCouponDetail() {
        const app = this
        myCouponApi.detail(app.userCouponId)
          .then(result => {
            app.detail = result.data
			app.getRowCount(app.detail.useRule)
			app.getDataList(app.detail.useRule, app.detail.confirmCount)
          })
          .finally(() => app.isLoading = false)
      },
	   doConfirm() {
		  const app = this
		  
		  if (app.detail.type == 'P') {
			  if (app.form.amount <= 0) {
				app.$error("核销金额不能小于0，请输入")
				return false
			  } else if (app.form.amount > app.detail.amount) {
				app.$error("核销金额不能大于" + app.detail.amount + "，请重新输入")
				return false
			  }
		  }
		  
		  app.isLoading = true
		  confirmApi.doConfirm(app.detail.code, app.form.amount, app.form.remark)
		    .then(result => {
				if (result.data) {
					app.getCouponDetail()
					this.$success("核销成功")
					app.detail.status = result.data.status
					app.detail.balance = result.data.balance
					app.form.amount = ""
					app.form.remark = ""
				} else {
					this.$error(result.message)
				}
				app.isLoading = false
				resolve(result)
			})
	  },
	  // 组织数据
	  getDataList(num, use) {
	  		  const app = this
	  		  if (num <= 4 && num > 0) {
	  			  app.dataList = [{"data": []}]
	  			  for (let i = 1; i <= num; i++) {
	  				  app.dataList[0].data.push({"isActive": (i <= use ? true : false)})
	  			  }
	  		  } else {
	  			  let rowCount = Math.ceil(num / 4)
	  			  let c = 1;
	  			  for (let i = 0; i < rowCount; i++) {
	  				  app.dataList[i] = {"data": []}
	  				  for (let j = 1; j <= 4; j++) {
	  					  if (c <= num) {
	  			  		     app.dataList[i].data.push({"isActive": (c <= use ? true : false)})
	  					     c++
	  					}
	  				  }
	  			  }
	  		  }
	  },
	  // 计算行数
	  getRowCount(num) {
	  		 if (num < 4 && num > 0) {
	  			 this.rowCount = 24 / num
	  		 } else if (num >= 4) {
	  			 this.rowCount = 6
	  		 }
	  }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background: #fff;
	color:#666666;
  }
  
  .base {
	  border: dashed 5rpx #cccccc;
	  padding: 30rpx;
	  border-radius: 10rpx;
	  margin: 20rpx;
	  height: 270rpx;
	  .coupon-image {
		  float: left;
		  margin-top: 10rpx;
		  .image {
			  width: 200rpx;
			  height: 158rpx;
			  border-radius: 8rpx;
		  }
		  width: 30%;
	  }
	  .coupon-title {
		  float: left;
		  margin-left: 30rpx;
		  overflow: hidden;
		  width: 65%;
		  .name {
			 font-weight: bold;
		  }
		  .price {
			margin-top:20rpx;
			color:#666;
			font-size: 20rpx;
			.label {
				font-size:20rpx;
			}
		  }
		  .balance {
			  margin-top:20rpx;
			  color:#f9211c;
			  font-size:20rpx;
		  }
		  .tips {
			 margin-top:20rpx;
			 font-size: 20rpx;
		  }
		  .time {
			 margin-top: 10rpx;
			 font-size: 20rpx;
			 color: #666666;
		  }
	  }
  }
  .confirm-form {
	border: dashed 5rpx #cccccc;
	padding: 30rpx;
	border-radius: 10rpx;
	margin: 20rpx;
	.input {
		border: solid 1px #ccc;
		padding-left: 20rpx;
		margin-bottom: 10rpx;
		border-radius: 10rpx;
		width: 98%;
		display: inline-flex;
	}
	.coupon-timer {
		  border-radius: 10rpx;
		  clear: both;
		  overflow: hidden;
		  margin-bottom: 10rpx;
		  height: 100%;
		  .tips {
			  margin-bottom: 60rpx;
		  }
		  .time-row {
			  margin-bottom: 10rpx;
			  height: 100rpx;
			  display: flex;
		  }
		  .time-item {
			  padding-top: 10rpx;
			  text-align: center;
			  align-items: center;
			  justify-content: center;
		  }
		  .time {
			  height: 80rpx;
			  margin-bottom: 30rpx;
			  text-align: center;
			  padding-top: 20rpx;
			  border-radius: 40rpx;
			  color: #ffffff;
			  font-weight: bold;
			  background: url('/static/confirm/undo.png') no-repeat center center;
			  background-size: contain;
		  }
		  .active {
			  background: url('/static/confirm/do.png') no-repeat center center;
			  background-size: contain;
			  border: solid 1px #ffffff;
		  }
		  min-height: 160rpx;
	}
  }
  .coupon-content {
    font-size: 28rpx;
	padding: 15rpx;
	border: dashed 5rpx #cccccc;
	border-radius: 5rpx;
	margin: 20rpx;
	min-height: 400rpx;
	.title {
		margin-bottom: 15rpx;
	}
  }
  
  .footer-fixed {
	position: fixed;
	width: 100%;
	bottom: var(--window-bottom);
  	height: 96rpx;
  	z-index: 11;
  	margin-top: 20rpx;
  	.btn-wrapper {
  	  height: 100%;
  	  display: flex;
  	  align-items: center;
  	  padding: 0 20rpx;
	  .cannot {
	    border-radius: 38rpx;
	    color: #fff;
	    line-height: 80rpx;
	    text-align: center;
	    font-weight: 500;
	    font-size: 28rpx;
	    background:linear-gradient(to right, #cccccc, #cccccc)
	  }
  	}
  
  	.btn-item {
  	  flex: 1;
  	  font-size: 28rpx;
  	  height: 72rpx;
  	  line-height: 72rpx;
  	  text-align: center;
  	  color: #ffffff;
  	  border-radius: 50rpx;
  	}
  
  	.btn-item-main {
  	  background: linear-gradient(to right, #f9211c, #ff6335);
  	}
  }
</style>
